<template>
	<view>
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in 3" :key="index">
					<image src="/static/corporation/picture.jpg"></image>
				</swiper-item>
			</swiper>
			<!-- 没注册时用这个默认数据 -->
			<view class="width-90 flex-row"  v-if="!isAlreadyLogin" @click="turnHonourList()">
				<view class="avatarUrl-border" style="width: 20%;">
					<image class="avatarUrl-img" src="/static/corporation/logo.jpg"></image>
				</view>
				<view class="top-right-box">
					<view class="title-box">
						<text style="font-weight: bold;">广药轮滑</text>
					</view>
					<view class="flex-column">
						<text class="tips-text">广东药科大学轮滑俱乐部</text>
						<text class="tips-text">成立于：2006年</text>
					</view>
				</view>
				<view class="join-img-box flex-column" @click.stop="turnApplyJoin()"  v-if="!isApply">
					<image class="join-img" src="/static/corporation/shoudongtianjias.png"></image>
					<text>申请加入</text>
				</view>
			</view>
			<!-- 注册登录之后会拿到一个属于他自己的特定的社团数据 -->
			<view class="width-90 flex-row"  v-if="isAlreadyLogin" @click="turnHonourList()"> 
				<view class="avatarUrl-border" style="width: 20%;">
					<image class="avatarUrl-img" :src="corporationInfo.logo"></image>
				</view>
				<view class="top-right-box">
					<view class="title-box">
						<text style="font-weight: bold;">{{corporationInfo.shortName}}</text>
					</view>
					<view class="flex-column">
						<text class="tips-text">{{corporationInfo.fullName}}</text>
						<text class="tips-text">成立于：{{corporationInfo.founded}}年</text>
					</view>
				</view>
				<view class="join-img-box flex-column" @click.stop="turnApplyJoin()" v-if="!isApply">
					<image class="join-img" src="/static/corporation/shoudongtianjias.png"></image>
					<text>申请加入</text>
				</view>
			</view>
			
			<view class="width-90 flex-row" style="width: 100%;">
				<view class="width-4-box" @click="turnGroceryStore()">
					<image src="/static/corporation/huikuanS.png" class="box-in-image"></image>
					<text>杂货铺</text>
				</view>
				<view class="width-4-box">
					<image src="/static/corporation/renwuS.png" class="box-in-image"></image>
					<text>任务表</text>
				</view>
				<view class="width-4-box">
					<image src="/static/corporation/zhishikuS.png" class="box-in-image"></image>
					<text>教程集</text>
				</view>
				<view class="width-4-box" @click="turnMemberList()">
					<image src="/static/corporation/kehu.png" class="box-in-image"></image>
					<text>成员图</text>
				</view>
			</view>
			
			<view class="out-border-line" @click="turnActivityDetail()" v-for="(item,index) in activityInfo" :key="index">
				<view class="width-90 flex-row" style='align-items: center;'>
					<view class="flex-column">
						<view class="title-box">
							<text class="content-title">{{item.title}}</text>
						</view>
						<text class="content-text">地点：{{item.address}}</text>
						<text class="content-text">日期：{{item.time}}</text>
					</view>
					<view class="right-clock-box">
						<image src="/static/corporation/asklist.png" class="box-in-image"></image>
						<text>请假</text>
					</view>
					<view class="right-clock-box" style="margin-left: 30rpx;"  @click.stop="showToasts()">
						<image src="/static/corporation/clock.png" class="box-in-image"></image>
						<text>打卡</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		getActivityInfo
	} from '@/common/api/corporation/corporationActivity.js'
	import {getTime} from '@/common/utils/timeParseInt.js'
	export default {
		data() {
			return {
				isAlreadyLogin: false,
				isApply: false,
				corporationInfo: {},
				// 是否加入社团
				isApply: false,
				activityInfo: []
			}
	},
	methods: {
		// 跳转到申请加入
		turnApplyJoin:function(){
			uni.navigateTo({
				url: '/pages/corporation/applyJoin/applyJoin'
			})
		},
		// 跳转到杂货铺
		turnGroceryStore:function(){
			uni.navigateTo({
				url: '/pagesA/pages/groceryStore/groceryStore'
			})
		},
		// 跳转到请假
		turnAskList:function(){
			if(this.isApply){
				uni.navigateTo({
					url: '/pages/corporation/askList/askList'
				})
			}else{
				uni.showToast({
					title: "请先加入社团再使用该功能"
				})
			}
		},
		// 跳转到活动详情
		turnActivityDetail:function(){
			if(this.isAlreadyLogin){
				console.log("跳转活动详情")
			}else{
				uni.showToast({
					title: "请先登录再使用该功能"
				})
			}
			
		},
		// 申请加入社团
		applyJoin:function(){
			uni.navigateTo({
				url: '/pages/corporation/appluJoin/applyJoin'
			})
		},
		// 跳转到社团荣誉奖项
		turnHonourList:function() {
			uni.navigateTo({
				url: '/pages/corporation/honourList/honourList'
			})
		},
		// 跳转到成员表
		turnMemberList: function() {
			uni.navigateTo({
				url: '/pages/corporation/memberList/memberList'
			})
		},
		// 获取活动信息
		getActivityInfo: function(){
			var that = this
			getActivityInfo(1,10,{
				clubId: uni.getStorageSync("clubId")
			}).then(res => {
				if(res.data.code == 200) {
					if(res.data.data.list.length != 0) {
						res.data.data.list.forEach(function(item,index) {
							that.activityInfo.push({
								title: item.title,
								address: item.address,
								time: getTime(item.begin)
							})
						})
					}
				}
			})
		},
		showToasts:function(){
			uni.showToast({
				title: '打卡成功'
			})
		},
	},
	onLoad() {
		this.isAlreadyLogin = uni.getStorageSync("isAlreadyLogin")
		this.corporationInfo = uni.getStorageSync("corporationInfo")
		this.isApply = uni.getStorageSync("isApply")
		this.getActivityInfo()
	}
	}
</script>

<style>
.top-right-box{
	width: 50%;
	height: 70rpx;
	margin: 0 auto;
}
/* 摆放的四个等大小的box */
.width-4-box{
	width:25%;
	height:130rpx;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.box-in-image{
	width: 65rpx;
	height: 65rpx;
	margin: 0 auto;
	margin-top: 7rpx;
	margin-bottom: 10rpx;
}
.width-4-box text{
	font-size: 14px;
}
/* 小标题 */
.content-title{
	font-size: 16px;
	font-weight: bold;
}
.content-text{
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 14px;
	color: #898989;
}
/* 右边的请假打卡的box */
.right-clock-box{
	width: 100rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.right-clock-box text{
	font-size: 15px;
}
.join-img-box{
	width: 20%;
	height: 100%;
	text-align: center;
}
.join-img-box image{
	width: 50px;
	height: 50px;
	margin: 0 auto;
}
.join-img-box text{
	font-size: 14px;
}
</style>
